import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { Avatar , Icon } from 'weaver-mobile';
import { ListPage , RouteLayout} from 'weaver-mobile-page';
import { toJS} from 'mobx';
import ReceiptForm from './receiptForm'
import MeetingUtil from '../../../util/meetingUtil';
import NoData from '../../../public/NoData';
const Normal = ListPage.Normal; // Normal 为无路由的普通组件

@inject('viewMeetingStore')
@withRouter
@observer
class MemberDetail extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      };
    }
    componentDidMount() {
    }

    //recordId:代表meeting_member2中id
    //isAttend:代表是查看还是填写回执
    openMemberReceipt = (recordId, isAttend, canEdit)=>{
      const { setState } = this.props.viewMeetingStore;
      const isPreview = isAttend?"1":"0"
      const pathname = this.props.location.pathname;
      setState({
        recordId: recordId,
        isPreview: isPreview,
        canEdit: canEdit,
        prePathName: `${pathname}/receiptForm`,
      })
      sessionStorage.setItem('meetingMemberRecorderid',recordId);
      this.props.history.push(`${pathname}/receiptForm`);
    }

    render() {
      const {  viewMeetingStore} = this.props;
      const { memberType,hrmList,crmList } = viewMeetingStore;
      let memberTypeTemp = memberType || 1
      let mobileshowtemplate = {};
      mobileshowtemplate = {
        default: [
          {
            key: 'col1',
            style: { flex: 'none' },
            render(a) {
              return <Avatar userId={toJS(a).userId || ''} name={toJS(a).hrmName} url={toJS(a).url} />;
            },
          },
          {
            key: 'col2',
            configs: [
              { key: 'col2-row1', configs: [{ key: 'hrmName' }],style:{color:'#333'} },
              { key: 'col2-row2', configs: [{ key: 'desc' }] },
            ],
          },
          {
            key: 'col3',
            style: { flex: 'none' },
            configs: [
              { key: 'col3-row1',
              render:(a)=>{return a.attend?<span style={{color:'#333',float:'right'}} >{a.attend}</span>:<span className={'wm-list-page-item-row-span'} >{a.attend}</span>;}},
              { key: 'col3-row2', render:(a)=>{return a.showBtn&&<span style={{float:'right'}} >{a.showBtn}</span>;} },
            ],
          },
          {
            key: 'col4',
            style: { flex: 'none' },
            configs: [
              { key: 'col4-row1', configs: [{ key: '' }] },
              { key: 'col4-row2', render:(a)=>{return a.showBtn&&<span style={{float:'right',marginLeft:'-5px'}} ><Icon type='right' style={{verticalAlign:'middle'}}/></span>;} },
            ],
          },
        ],
      };
      const memberHeight = this.getHeight();
        return (
          <div style={{ height: "100%" }}>
          <div style={{height:memberHeight,overflowY:'auto'}} className={'member-detail-contain'}>
          {parseInt(memberTypeTemp,10)=== 1?
          hrmList.data.length ===0?<NoData />:
          <Normal
                template={mobileshowtemplate}
                store={parseInt(memberTypeTemp,10)=== 1 ? hrmList : crmList}
                onRowClick={(rowData)=>{rowData.showBtn?this.openMemberReceipt(rowData.id,rowData.attend,rowData.canEdit):''}}
            />:
            crmList.data.length ===0?<NoData />:
            <Normal
                  template={mobileshowtemplate}
                  store={parseInt(memberTypeTemp,10)=== 1 ? hrmList : crmList}
                  onRowClick={(rowData)=>{rowData.showBtn?this.openMemberReceipt(rowData.id,rowData.attend,rowData.canEdit):''}}
              />
          }
            </div>
            <Switch>
            <Route
              key="receiptForm"
              path="/calendar/detail/member/:member/:type/receiptForm"
              render={()=>(
                <RouteLayout>
                <div key="receiptFormDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <ReceiptForm  />
                </div>
                </RouteLayout>
              )}
            />
          </Switch>
        </div>
        )
    }

    getHeight = () => {
      return document.body.clientHeight - MeetingUtil.getTabHeight();
    }
}

export default MemberDetail;